<!--新增原始舱单-->
<template>
    <div class="content manifest-road">
        <section class="base-info">
            <h3>基本信息</h3>
            <Form
                class="form-mini hidden-error"
                :show-message="false"
                ref="customsManifestRef"
                :model="customsManifest"
                :rules="customsManifestRules"
                inline
                :labelWidth="110"
                style="width: 110%; margin-left: 10px;"
            >
                <FormItem label="货物运输批次号" prop="cargoBatchNo">
                    <Tooltip placement="top" :disabled="!manifestErrForm.cargoBatchNo" :content="manifestErrForm.cargoBatchNo">
                        <Input
                            v-model="customsManifest.cargoBatchNo"
                            class="input-width require-bg"
                            :disabled="disabled"
                            @keyup.native="setFocus"
                            @on-blur="handleBatchNoEnter"
                            size="small"
                        >
                        </Input>
                        <Icon class="search-btn" type="ios-search" @click="openCargoBatchNoModal" color="#1177E8" :size="18" />
                    </Tooltip>
                </FormItem>
                <FormItem label="运输方式代码" prop="transportType" class="transportType" style="margin-left: -18px;">
                    <RemoteSearch
                        class="input-width transportType"
                        size="small"
                        v-model="customsManifest.transportType"
                        :disabled="disabled"
                        :list="mTransportTypeList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        @keyup.native="setFocus"
                    >
                    </RemoteSearch>
                </FormItem>
                <FormItem label="进出境口岸海关" prop="iePort" class="iePort">
                    <Tooltip placement="top" :disabled="!manifestErrForm.iePort" :content="manifestErrForm.iePort">
                        <RemoteSearch
                            class="input-width require-bg"
                            size="small"
                            v-model="customsManifest.iePort"
                            :disabled="disabled"
                            :list="customsCodeList"
                            keywordFiled="shortName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'shortName']"
                            @keyup.native="setFocus"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem label="承运人代码" prop="carrierCode">
                    <Input
                        v-model="customsManifest.carrierCode"
                        class="input-width"
                        size="small"
                        placeholder="请输入承运人代码"
                        :disabled="disabled"
                        @keyup.native="setFocus"
                    >
                    </Input>
                </FormItem>
                <FormItem label="运输工具代理企业代码" prop="agentCode" :label-width="135" style="margin-left: -25px;">
                    <Input
                        v-model="customsManifest.agentCode"
                        class="input-width"
                        size="small"
                        placeholder="请输入运输工具代理企业代码"
                        :disabled="disabled"
                        @keyup.native="setFocus"
                    >
                    </Input>
                </FormItem>
                <FormItem label="货物装载时间" prop="loadingDate">
                    <Tooltip placement="top" :disabled="!manifestErrForm.loadingDate" :content="manifestErrForm.loadingDate">
                        <DatePicker
                            type="datetime"
                            size="small"
                            v-model="customsManifest.loadingDate"
                            placeholder="请设置货物装载时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            class="input-width require-bg"
                            transfer
                            @keyup.native="setFocus"
                        >
                        </DatePicker>
                    </Tooltip>
                </FormItem>
                <FormItem v-if="isOrigin" label="卸货地代码" prop="unloadingPlace" class="unloadingPlace">
                    <Tooltip placement="top" :disabled="!manifestErrForm.unloadingPlace" :content="manifestErrForm.unloadingPlace">
                        <RemoteSearch
                            v-model="customsManifest.unloadingPlace"
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            :list="customsCodeList"
                            @keyup.native="setFocus"
                            keywordFiled="shortName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'shortName']"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem v-else label="装货地代码" prop="loadingPlace" class="loadingPlace">
                    <Tooltip placement="top" :disabled="!manifestErrForm.loadingPlace" :content="manifestErrForm.loadingPlace">
                        <RemoteSearch
                            v-model="customsManifest.loadingPlace"
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            :list="customsCodeList"
                            @keyup.native="setFocus"
                            keywordFiled="shortName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'shortName']"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem v-if="isOrigin" label="到达卸货地日期" prop="arrivalDate">
                    <DatePicker
                        type="datetime"
                        size="small"
                        v-model="customsManifest.arrivalDate"
                        placeholder="请设置到达卸货地日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        class="input-width"
                        transfer
                        @keyup.native="setFocus"
                    >
                    </DatePicker>
                </FormItem>

                <FormItem label="舱单传输人名称" prop="representativePerson">
                    <Tooltip placement="top" :disabled="!manifestErrForm.representativePerson" :content="manifestErrForm.representativePerson">
                        <Input
                            v-model="customsManifest.representativePerson"
                            class="input-width require-bg"
                            @keyup.native="setFocus"
                            size="small"
                        />
                    </Tooltip>
                </FormItem>

                <FormItem label="申报单位" prop="agentName">
                    <Tooltip placement="top" :disabled="!manifestErrForm.agentName" :content="manifestErrForm.agentName">
                        <Input
                            v-model="customsManifest.agentName"
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                        />
                    </Tooltip>
                </FormItem>

                <FormItem label="备注" prop="content">
                    <Input
                        v-model="customsManifest.content"
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                    >
                    </Input>
                </FormItem>
            </Form>
        </section>
        <section>
            <h3>提运单信息</h3>
            <div class="btn-box">
                <Button type="primary" @click="clearBillsForm" :disabled="disabled" size="small">新增</Button>
                <Button type="primary" @click="deleteBillsItem" :disabled="disabled" size="small">删除</Button>
                <Button type="primary" @click="declareHandle" :disabled="disabled" size="small">申报</Button>
                <Button type="primary" @click="copyBillsItem" :disabled="disabled" size="small">复制</Button>
                <Button type="primary" @click="showReceipt" :disabled="disabled" size="small">查看回执</Button>
            </div>
            <Table
                border
                ref="billsTableRef"
                :columns="billsColumns"
                :data="consignmentSaveVos"
                @on-selection-change="billsSelectChange"
                @on-row-click="billsRowClick"
                :row-class-name="setCurrentRowClass"
                :loading="tableLoading"
            >
            </Table>
            <Form ref="billsFormRef" :model="billsForm" :rules="billsFormRules" inline :labelWidth="100" :show-message="false" class="bills-form form-mini hidden-error">
                <FormItem label="序号" prop="consignmentIndex">
                    <Input
                        v-model="billsForm.consignmentIndex"
                        class="input-width"
                        size="small"
                        disabled
                    >
                    </Input>
                </FormItem>
                <FormItem label="提（运）单号" prop="billNo">
                    <Tooltip placement="top" :disabled="!billsErrForm.billNo" :content="billsErrForm.billNo">
                        <Input
                            v-model="billsForm.billNo"
                            size="small"
                            class="input-width require-bg"
                            :disabled="disabled"
                            @keyup.native="setFocus"
                        >
                        </Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="运输条款" prop="conditionCode" class="conditionCode">
                    <RemoteSearch
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        v-model="billsForm.conditionCode"
                        :list="mConditionCodeList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        @on-enter="setFocus"
                    >
                    </RemoteSearch>
                </FormItem>
                <FormItem label="运费支付方式" prop="freightPaymentMethods" class="freightPaymentMethods">
                    <RemoteSearch
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        v-model="billsForm.freightPaymentMethods"
                        :list="mPaymentList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        @on-enter="setFocus"
                    >
                    </RemoteSearch>
                </FormItem>
                <FormItem
                    label="海关货物通关代码"
                    prop="cargoClearanceCode"
                    class="cargoClearanceCode"
                    :label-width="118"
                    style="margin-left: -18px;"
                >
                    <Tooltip placement="top" :disabled="!billsErrForm.cargoClearanceCode" :content="billsErrForm.cargoClearanceCode">
                        <RemoteSearch
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            v-model="billsForm.cargoClearanceCode"
                            :list="mCargoClearanceList"
                            keywordFiled="dataName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'dataName']"
                            @on-enter="cargoClearanceCodeEnter"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem v-if="isOrigin" label="途径国家代码" prop="countryInfo">
                    <Input
                        v-model="billsForm.countryInfo"
                        class="input-width"
                        readonly
                        size="small"
                        @click.native="openCountryModal"
                        :disabled="disabled"
                    >
                    </Input>
                </FormItem>
                <FormItem label="货物总件数" prop="totalPackageQuantity">
                    <Tooltip placement="top" :disabled="!billsErrForm.totalPackageQuantity" :content="billsErrForm.totalPackageQuantity">
                        <Input
                            v-model.number="billsForm.totalPackageQuantity"
                            size="small"
                            class="input-width require-bg totalPackageQuantity"
                            :disabled="disabled"
                            @keyup.native="setFocus"
                        >
                        </Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="包装种类" prop="packingType" class="packingType">
                    <Tooltip placement="top" :disabled="!billsErrForm.packingType" :content="billsErrForm.packingType">
                        <RemoteSearch
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            v-model="billsForm.packingType"
                            :list="mPackingTypeList"
                            keywordFiled="dataName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'dataName']"
                            @on-enter="setFocus"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem label="货物体积（M3）" prop="grossVolumeMeasure">
                    <Input
                        v-model="billsForm.grossVolumeMeasure"
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        @keyup.native="setFocus"
                    >
                    </Input>
                </FormItem>
                <FormItem label="货物总毛重(kg)" prop="totalGrossMeasure">
                    <Tooltip placement="top" :disabled="!billsErrForm.totalGrossMeasure" :content="billsErrForm.totalGrossMeasure">
                        <Input
                            v-model.number="billsForm.totalGrossMeasure"
                            class="input-width require-bg"
                            :disabled="disabled"
                            size="small"
                            @keyup.native="setFocus"
                        >
                        </Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="货物价值" prop="cargoValue">
                    <Tooltip placement="top" :disabled="!billsErrForm.cargoValue" :content="billsErrForm.cargoValue">
                        <Input
                            v-model.number="billsForm.cargoValue"
                            class="input-width require-bg"
                            :disabled="disabled"
                            size="small"
                            @keyup.native="setFocus"
                        >
                        </Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="金额类型" prop="amountType" class="amountType">
                    <Tooltip placement="top" :disabled="!billsErrForm.amountType" :content="billsErrForm.amountType">
                        <RemoteSearch
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            v-model="billsForm.amountType"
                            :list="amountTypeList"
                            keywordFiled="dataName"
                            valueField="dataCode"
                            :labelFieldList="['dataCode', 'dataName']"
                            @on-enter="setFocus"
                        >
                        </RemoteSearch>
                    </Tooltip>
                </FormItem>
                <FormItem :label="`${isOrigin ? '拆' : '拼'}箱人代码`" prop="deconsolidator">
                    <Input
                        v-model="billsForm.deconsolidator"
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        @keyup.native="setFocus"
                    >
                    </Input>
                </FormItem>
                <FormItem :label="`跨境${isOrigin ? '指' : '启'}运地`" prop="transitDestination">
                    <Input
                        v-model="billsForm.transitDestination"
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        @keyup.native="setFocus"
                    >
                    </Input>
                </FormItem>
                <FormItem label="收货人信息" prop="consigneeName" class="consigneeId">
                    <Tooltip placement="top" :disabled="!billsErrForm.consigneeName" :content="billsErrForm.consigneeName">
                        <Input
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            v-model="billsForm.consigneeName"
                        />
                    </Tooltip>
                </FormItem>
                <FormItem label="发货人信息" prop="consignorName" class="consignorId">
                    <Tooltip placement="top" :disabled="!billsErrForm.consignorName" :content="billsErrForm.consignorName">
                        <Input
                            class="input-width require-bg"
                            size="small"
                            :disabled="disabled"
                            v-model="billsForm.consignorName"
                        />
                    </Tooltip>
                </FormItem>
                <FormItem label="通知人信息" prop="notifyName" class="notifyId">
                    <Input
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        v-model="billsForm.notifyName"
                    />
                </FormItem>
                <FormItem label="危险品联系人" prop="dangercontactName" class="dangercontactId">
                    <Input
                        class="input-width"
                        size="small"
                        :disabled="disabled"
                        v-model="billsForm.dangercontactName"
                    />
                </FormItem>
                <FormItem label="状态">
                    <Input
                        :value="statusList[billsForm.consignmentStatus]"
                        size="small"
                        class="input-width"
                        disabled
                    >
                    </Input>
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        size="small"
                        @click="handlerBillsForm('billsFormRef')"
                        :disabled="disabled"
                    >{{ billsHandleBtnText }}</Button>
                </FormItem>
            </Form>
        </section>

        <section class="goods-container">
            <goodsInfo
                ref="goodsInfoRes"
                :parentParams="parentParams"
                :mPackingTypeList="mPackingTypeList"
                :disabled="disabled"
                @saveGoodsInfo="saveGoodsInfo"
            />

            <containerInfo
                ref="containerInfoRef"
                :parentParams="parentParams"
                :mContainerFlagList="mContainerFlagList"
                :disabled="disabled"
                @saveContainerInfo="saveContainerInfo"
            />
        </section>
        <footer>
            <Button type="primary" @click="saveManifest" :disabled="disabled" size="small">保存舱单</Button>
        </footer>

        <cargoBatchNoModal ref="cargoBatchNoModalRef" @queryManifest="queryManifest"/>
        <countryModal
            v-if="isOrigin"
            @saveCountryData="saveCountryData"
            @totalPackageQuantityGetFocus="totalPackageQuantityGetFocus"
            ref="countryModalRef"
        />
        <changeReasonModal @sendToSingleWindowHandle="sendToSingleWindowHandle" ref="changeReasonModalRef" />
        <declareFailure ref="declareFailureRef"/>
        <receiptModal ref="receiptModalRef"/>
        <errorModal ref="errorModalRef" />
        <representativeModal ref="representativeModalRef" @saveRepresentative="saveRepresentative"/>
    </div>
</template>

<script>
import commonJs from '../js/common'
import cargoBatchNoModal from '../components/cargoBatchNoModal'
import countryModal from '../components/countryModal'
import goodsInfo from '../components/goodsInfo'
import containerInfo from '../components/containerInfo'
import changeReasonModal from '../components/changeReasonModal'
import declareFailure from '../components/declareFailure'
import receiptModal from '../components/receiptModal'
import errorModal from '../components/errorModal'
import representativeModal from '../components/representativeModal'
import { manifestBaseMixins, consignmentVoMixins } from '../js/mixins'

export default {
    mixins: [
        manifestBaseMixins, // 批次号回车带入舱单信息
        consignmentVoMixins // 提运单信息表单
    ],
    components: {
        cargoBatchNoModal,
        countryModal,
        goodsInfo,
        containerInfo,
        changeReasonModal,
        declareFailure,
        receiptModal,
        errorModal,
        representativeModal
    },
    data () {
        return {
            manifestId: '',
            disabled: '',

            customsManifest: {
                manifestType: 'MT1401',
                cargoBatchNo: '',
                transportType: '3',
                iePort: '',
                carrierCode: '',
                agentCode: '',
                loadingDate: '',
                loadingPlace: '',
                unloadingPlace: '',
                arrivalDate: '',
                representativePerson: '',
                content: '',
                agentId: '',
                agentName: '',
                representativeCode: '',
                customsMaster: ''
            },

            // 提运单信息表表头
            billsColumns: commonJs.billsColumns,
            // 提运单信息表数据
            consignmentSaveVos: [],
            selectedBillsData: [],
            billsDataCurrentIndex: '',
            billsHandleBtnText: '保存',

            billsEdit: false, // 判断提运单是保存还是修改

            // 状态list
            statusList: commonJs.statusList,
            mPaymentList: [], // 支付方式字典
            mPackingTypeList: [], // 包装种类字典
            amountTypeList: [], // 金额类型字典
            customsCodeList: [], // 海关数据字典
            mContainerFlagList: [], // 重箱或空箱标识字典
            mConditionCodeList: [], // 运输条款数据字典
            mCargoClearanceList: [], // 海关货物通关代码数据字典
            mTransportTypeList: [], // 运输方式代码数据字典
            mCountryList: [], // 途径国家数据字典
            // 给子组件传参
            parentParams: {},

            tableLoading: false,

            companyObj: {
                representativePerson: '',
                customsMaster: '',
                clientId: '',
                representativeCode: ''
            }
        }
    },
    computed: {
        isOrigin () {
            return this.customsManifest.manifestType === 'MT1401'
        }
    },
    methods: {
        // 保存途径国家数据
        saveCountryData (list) {
            this.billsForm.consignmentCountryList = list
            let tempArr = []
            list.forEach(item => {
                tempArr.push(item.countryCode)
            })
            this.$set(this.billsForm, 'countryInfo', tempArr.join())
        },
        cargoClearanceCodeEnter (e) {
            if (this.isOrigin) {
                this.setFocus(e)
            } else {
                this.openCountryModal()
            }
        },
        // 打开途径国家弹窗
        openCountryModal () {
            if (this.disabled) {
                return false
            }
            let countryList = this.billsForm.consignmentCountryList
            this.$refs.countryModalRef.init(countryList, this.mCountryList)
        }
    } // methods end
}
</script>

<style lang="less">
    @import '../less/manifestRoad.less';
</style>
